<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Input Mask 输入格式 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    基于<code>InputMask</code>插件 <span class="badge badge-warning badge--inline">需手动引入js</span>
                    <a class="e-link e-font-bold" href="https://robinherbots.github.io/Inputmask/" target="_blank">官方文档</a>
                    <a class="e-link e-font-bold" href="https://github.com/RobinHerbots/Inputmask" target="_blank">Github</a>
                </div>
            </div>
        </div>
    </div>
    <form class="e-form">
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        基础
                    </h3>
                </div>
            </div>
            <div class="card-body">
                <form class="e-form">
                    <div class="e-section">
                        <div class="e-section-info">
                            框架中默认会将<code>.input-mask</code>当做InputMask插件初始化
                        </div>
                        <div class="e-section-content">
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3 col-md-4 col-sm-12">日期：</label>
                                <div class="col-lg-6 col-md-7 col-sm-12">
                                    <input type='text' class="form-control input-mask" data-mask="9999/99/99"/>
                                    <span class="form-text text-muted">在<code>input</code>上添加<code>.input-mask</code>和<code>[data-mask="9999/99/99"]</code>将自动初始化</span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3 col-md-4 col-sm-12">日期：</label>
                                <div class="col-lg-6 col-md-7 col-sm-12">
                                    <input type='text' class="form-control input-mask" data-mask="9999/99/99" data-placeholder="yyyy/mm/dd"/>
                                    <span class="form-text text-muted">如需设置提示文字，可以添加<code>[data-placeholder="yyyy/mm/dd"]</code>属性</span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3 col-md-4 col-sm-12">电话号码：</label>
                                <div class="col-lg-6 col-md-7 col-sm-12">
                                    <input type='text' class="form-control input-mask" data-mask="(999) 999-9999"/>
                                    <span class="form-text text-muted">电话号码<code>(999) 999-9999</code></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3 col-md-4 col-sm-12">手机号：</label>
                                <div class="col-lg-6 col-md-7 col-sm-12">
                                    <input type='text' class="form-control input-mask" data-mask="99-9999999"/>
                                    <span class="form-text text-muted">手机号<code>99-9999999</code></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3 col-md-4 col-sm-12">IP：</label>
                                <div class="col-lg-6 col-md-7 col-sm-12">
                                    <input type='text' class="form-control input-mask" data-mask="999.999.999.999"/>
                                    <span class="form-text text-muted">ip地址<code>255.255.255.255</code></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3 col-md-4 col-sm-12">Email：</label>
                                <div class="col-lg-6 col-md-7 col-sm-12">
                                    <input type='text' class="form-control" id="input-mask-email"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </form>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
<script src="/assets/plugins/custom/inputmask/inputmask.bundle.js"></script>
<script src="/assets/js/demo1/pages/form/plugins/input-mask.js"></script>
</body>
</html>